<template>
	<div class="lik-article">
		<div class="col-md-9 article-bg">
			<article class="article container well">
				<header class="article-header">
					<h1 class="article-title">{{data.title}}</h1>
					<div class="article-middle">
						<div class="article-keywords">
							标签：
							<router-link class="item" v-for="item in data.tags" :key="item.tag_id" :to="{path:'/topics',query:{tag_id:item.tag_id}}" :title="item.tag_name">{{item.tag_name}}</router-link> 
						</div>
						<div class="article-meta">
							<span class="item"><i class="glyphicon glyphicon-time time-clock"></i>{{data.created_at}}</span>
							<span class="item">浏览<font>{{data.see_nums}}</font>
							</span>
							<span class="item commentcount" v-if="data.comments">评论<font>{{data.comments.length}}</font>
							</span>
						</div>
					</div>
				</header>
				<article class="article-content">
					<hr style="margin: 0px 0px 15px 0px; width: 100%">
					<div class="summary" v-if="data.briefly">
						{{data.briefly}}
					</div>
					<p v-if="data.content" @click="showImage($event)" ref="content" class="markdowm__content" v-html="toMarkDown(data.content)"></p>
				</article>
				<div class="copyright alert alert-success reprint" v-if="data.reprint">
					转载自： <a :href="data.reprint" target="_blank" class="reprint-class"> {{data.reprint}}</a>
				</div>
			</article>
			<div class="panel approve-body" v-if="data.approves">
				<Approve :id="data.id" :approve="data.approveing" :list="data.approves" @approve="approve"></Approve>
			</div>
			<div class="panel comment-body" v-if="data.comments">
				<div class="comment-header">回复数量：<font>{{data.comments.length}}</font></div>
				<div class="comment-content">
					<Comment :item="data.id" :list="data.comments" v-if="data.allow_comment" @newReply="newReply"></Comment>
					<span class="text-center" v-else>这篇文章的评论功能已被关闭</span>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="panel panel-default right-sold" v-if="showRecommend">
				<div class="panel-heading text-center">
                    <h3 class="panel-title">随便推荐</h3>
                </div>
                <template v-if="hasRecommend()">
				<ul>
					<li v-for="item in recommends" v-if="item.id !== data.id">
						<router-link :to="`/topics/item_${item.id}.html`" :title="item.title">{{item.title}}</router-link>
					</li>
				</ul>
				</template>
				<template v-else>
					<p class="no-recommend">暂无推荐</p>
				</template>
			</div>
			<div class="panel panel-default right-sold">
				<div class="panel-heading text-center">
                    <h3 class="panel-title">标签云</h3>
                </div>
				<div class="tags">
					<router-link v-for="item in tags" :key="item.id" :to="{path:'/topics',query:{tag_id:item.id}}" :title="item.tag_name">{{item.tag_name}}</router-link>
				</div>
			</div>
			<div class="panel panel-default right-sold" v-if="menuArray.length" ref="menu" :class="{menuFix: menuFix}">
				<div class="panel-heading text-center">
                    <h3 class="panel-title">目录</h3>
                </div>
				<div class="item-menus">
					<span v-for="(item,index) in menuArray" @click="scrollToH1(index)" :title="item.title" :name="item.active" :class="{active:index === checked}">{{item.title}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Comment from 'packages/comments/comments'
	import Approve from 'packages/approves/approves'
    import {mapGetters, mapMutations} from 'vuex'
    import Marked from 'common/convertMarkDown'
    import {setTitle} from 'common/dom'
    import {scrollTo, getScrollTop} from 'common/dom'

	export default {
		computed: {
			showRecommend() {
				return this.website.recommend
			},
            ...mapGetters([
              'website',
              'tags',
              'login',
              'recommends'
            ])
        },
		data() {
			return {
				data: {
					title: '',
					approveing: false
				},
				menuArray: new Array(),
				nowScrollTop: '',
				menuReady: false,
				menuLength: 0,
				menuOffset: '',
				menuFix: 0,
				checked: 0
			}
		},
		created() {
			this.routerChange()
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			toMarkDown(string) {
				if(!this.menuReady) {
					this.menuReady = true
					let _this = this
					setTimeout(()=>{_this.getMenu()},80)
				}
				if(this.data.type == 1) {
					return Marked(string, { sanitize: true })
				}
				return string
			},
			hasRecommend() {
				if(this.recommends.length === 0 || (this.recommends.length === 1 && this.recommends[0].id === this.data.id)) {
					return false
				}
				return true
			},
			showImage(event) {
				if(event.target.nodeName === 'IMG'){
					this.setShowImage(event.target.src)
					// this.src = event.target.src
				}
			},
			approve(item) {
				this.data.approveing = !this.data.approveing
				if(this.data.approveing) {
					this.data.approves.push(item)
				}else{
					let list = this.data.approves
					for (let i = 0; i < list.length; i++) {
						if(list[i].id == item.id || list[i].user_id == item.id) {
							list.splice(i,1)
						}
					}
					this.data.approves = list
				}
			},
			handleScroll() {
				this.nowScrollTop = getScrollTop()
				if(!this.menuLength) {
					return false
				}
				//判断menu容器距离顶部的数据是否存在
				if(this.menuOffset == '') {
					this.menuOffset = this.$refs.menu.offsetTop
				}
				if(!this.menuFix && this.nowScrollTop > this.menuOffset + 45) {
					this.menuFix = 1
				}else if(this.menuFix && this.nowScrollTop < this.menuOffset + 45) {
					this.menuFix = 0
				}
				if(this.nowScrollTop < this.menuArray[0].offsetTop) {
					this.checked === 0 ? '' : this.checkActived(0)
					return false;
				}
				if(this.nowScrollTop > this.menuArray[this.menuLength - 1].offsetTop) {
					this.checked === this.menuLength - 1 ? '' : this.checkActived(this.menuLength - 1)
					return false;
				}
				this.menuArray.forEach((item, index) => {
					if(this.nowScrollTop > item.offsetTop && this.nowScrollTop <= this.menuArray[index + 1].offsetTop){
						this.checkActived(index)
					}
				})
			},
			scrollToH1(checked) {
				this.checkActived(checked)
				scrollTo(this.menuArray[checked].offsetTop + 15)
			},
			checkActived(checked) {
				this.checked = checked
			},
			getMenu() {
				let content = this.$refs.content
				let h1s = content.getElementsByTagName("h1")
				let array = new Array()
				for (let i = 0; i < h1s.length; i++) {
					let h1 = h1s[i]
					array.push({
						'title': h1.innerText,
						'offsetTop': h1.offsetTop
					})
				}
				this.menuArray = array
				this.menuLength = this.menuArray.length
			},
			routerChange() {
				this.id = parseInt(this.$route.params.id)
				scrollTo(0)
				this.comments = new Array()
				this.menuReady = false
				this.__getData()
			},
			fullUrl() {
				return window.location.href;
			},
			newReply(object) {
				this.data.comments.push(object);
			},
			__getData() {
				let url = this.login ? 'topic-login' : 'topic-unlogin';
				this.$http.get(url + '/'+this.id).then((response)=>{
					this.data = response.data
					setTitle(this.data.title)
					let _this = this
					setTimeout(()=>{_this.setDataReady(true)},30)
				})
			},
            ...mapMutations({
              setDataReady: 'SET_DATA_READY',
              setShowImage: 'SET_SHOW_IMAGE'
            })
		},
		components: {
			Comment,Approve
		},
		watch: {
			'$route': 'routerChange'
		}
	}
	
</script>

<style lang="scss" scope>
	.lik-article {
		.article-bg {
			.well {
				margin-bottom: 30px;
			    background-color: #fff;
			    width: 100%;
			}
			.article-header {
			    margin-bottom: 12px;
			    text-align: left;
			    font-family: inherit;
			    font-weight: 500;
			    line-height: 1.2;
			    color: inherit;
			    .article-title {
				    margin-top: 0;
				    line-height: 1.5;
				    font-weight: 500;
				    color: #6c757d;
				}
				.article-middle{
					div{
						display: inline-block;
					}
					.article-keywords {
					    font-size: 13px;
					    .item {
						    margin-right: 12px;
						    color: #999;
						    cursor: pointer;
						    &:hover {
						    	color: #1abc9c;
						    }
						}
					}
					.article-meta {
					    font-size: 13px;
					    color: #999;
					    float: right;
					    line-height: 16px;
					    .time-clock {
							color: #5CD9EF;
							padding-right: 5px;
						}
						.item {
						    margin-right: 12px;
						}
					}
				}
			}
			.article-content {
			    font-size: 15px;
			    line-height: 25px;
			    word-wrap: break-word;
			    .summary {
					font-style: italic;
					background: #f6f6f6;
					color: #adadad;
					text-indent: 26px;
					border-radius: 5px;
					text-align: justify;
					word-wrap: break-word;
					padding: 10px;
				}
			}
			.reprint {
				.reprint-class {
					max-width: 100%;
				    display: block;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    padding: 2px 0;
				}
			}
			.comment-body {
				>.comment-header{
					font-size: 14px;
					padding: 15px 0 15px 8px;
					border-bottom: 1px solid #f6f6f6;
				}
				.comment-content{
					padding: 20px 25px 20px 30px;
					>span{
						display: block;
						color: #9d9d9d;
					}
				}
			}
		}
		.panel-default {
			>.panel-heading {
				background-color: #fff;
				border-bottom: 1px solid #f6f6f6;
			}
		}
		.menuFix {
			position: fixed;
		}
		.right-sold {
			ul {
				list-style: none;
				padding: 12px 10px;
				margin: 0;
				>li {
					height: 20px;
					margin-bottom: 0px;
				    line-height: 16px;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    width: 100%;
				    display: inline-block;
				    >a {
						color: #777;
					    line-height: 22px;
					    font-size: 14px;
					    cursor: pointer;
					    &:hover {
							text-decoration: underline;
							transition: color .15s ease 0s;
						}
					}
				}
			}
			.no-recommend {
				color: #adadad;
				text-align: center;
				margin: 20px 0;
			}
			.tags {
				padding: 15px 10px;
				>a {
					line-height: 22px;
					cursor: pointer;
					margin: 0 5px;
					font-size: 13px;
					color: #5cb85c;
					&:hover {
						color: #468847;
					}
				}
			}
			.item-menus {
				padding: 5px 10px;
				>span {
					display: block;
					cursor: pointer;
					padding: 2px 5px;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					&.active {
						background: rgba(172,230,175,.7);
						color: #fff;
						border-radius: 4px;
					}
				}
			}
		}
	}
	
	@media (min-width: 992px) {
		.menuFix {
			display: block;
			top: 25px;
	    	width: 212.5px;
		}
		.article-content {
	    	font-size: 14px !important;
		}
		.article-title {
			font-size: 26px;
		}
	}

	@media (min-width: 1200px) {
		.menuFix {
			left: auto;
			top: 20px;
			width: 262.5px;
		}
		.article-content {
	    	font-size: 15px !important;
		}
	}

	
	@media (max-width: 991px) {
		.menuFix {
			display: none;
		}
		.article-title {
			font-size: 22px;
		}
	}

	@media (max-width: 650px) {
		.article-content {
	    	font-size: 13px !important;
		}
		.article-title {
			font-size: 20px;
		}
	}

	@media only screen and (max-width: 469px){
		.article-middle>div{
			display: block;
		}
		.article-meta {
			float: none;
		}
		.article-title {
			font-size: 16px;
		}
	}
</style>